<template>
    <div>
        <div id="login">
            <div class="header">注册</div>
            <form @submit.prevent="login">
                <div class="container">
                    <input v-model="username" type="text" id="username" placeholder="请输入用户名">
                    <span class="left"></span>
                    <span class="right"></span>
                    <span class="top"></span>
                    <span class="bottom"></span>
                </div>
                <div class="container1">
                    <input v-model="password" type="password" placeholder="请输入密码">
                    <span class="left"></span>
                    <span class="right"></span>
                    <span class="top"></span>
                    <span class="bottom"></span>
                </div>
                <div class="container2">
                    <input v-model="confirmedPassword" type="password" id="confirmedPassword" placeholder="请再次输入密码">
                    <span class="left"></span>
                    <span class="right"></span>
                    <span class="top"></span>
                    <span class="bottom"></span>
                </div>
                <div class="error-message">{{ error_message }}</div>
                <button class="btn" type="submit" @click="register">注册</button>
            </form>
        </div>
    </div>

</template>
<script>
// import ContentField from '../../../components/ContentField.vue'
import { ref } from 'vue'
import router from '../../../router/index'
import { useStore } from 'vuex'
import $ from 'jquery'
import IP from '../../../store/api'
export default {
    components: {
        // ContentField
    },
    setup() {
        let username = ref('');
        let password = ref('');
        let confirmedPassword = ref('');
        let error_message = ref('');
        const store = useStore();

        const jwt_token = localStorage.getItem("jwt_token");
        if (jwt_token) {
            store.commit("updateToken", jwt_token);
            store.dispatch("getinfo", {
                success() {
                    router.push({ name: "home" });
                    store.commit("updatePullingInfo", false);
                },
                error() {
                    store.commit("updatePullingInfo", false);
                }
            })
        } else {
            store.commit("updatePullingInfo", false);
        }
        const register = () => {
            $.ajax({
                url: IP.register_api,
                type: 'post',
                data: {
                    username: username.value,
                    password: password.value,
                    confirmedPassword: confirmedPassword.value,
                },
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                success(resp) {
                    if (resp.error_message === "success") {
                        error_message.value = "";
                        store.dispatch("login", {
                            username: username.value,
                            password: password.value,
                            success() {
                                store.dispatch("getinfo", {
                                    success() {
                                        router.push({ name: 'home' });
                                    }
                                });
                            },
                        })
                    } else {
                        error_message.value = resp.error_message;
                    }
                },
            });

        }
        return {
            username,
            password,
            confirmedPassword,
            error_message,
            register,
        }
    }
}
</script>

<style scoped>
div.error-message {
    color: red;
}


* {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100vh;
    height: 100vw;
}

#login {
    width: 358px;
    height: 588px;
    border-radius: 15px;
    padding: 0 50px;
    position: relative;
    left: 50%;
    top: 50vh;
    transform: translate(-50%, -50%);
    background-color: #282c34;
}

.header {
    font-size: 38px;
    font-weight: bold;
    text-align: center;
    line-height: 200px;
    color: #61dafb;
}

.container {
    height: 30px;
    width: 250px;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
}

.container2 {
    height: 30px;
    width: 250px;
    position: absolute;
    left: 50%;
    top: 60%;
    transform: translate(-50%, -50%);
}

input {
    width: 100%;
    height: 100%;
    position: relative;
    outline: none;
    border: none;
    box-sizing: border-box;
    padding-left: 5px;
    background-color: #282c34;
    color: #61dafb;
    caret-color: #61dafb;
}

input::placeholder {
    color: #61dafb;
}

span {
    position: absolute;
    content: "";
    display: block;
    background-color: #61dafb;
    transition: transform .1s ease-in-out;
}

.top,
.bottom {
    left: 0px;
    right: 0px;
    height: 2px;
}

.left,
.right {
    top: 0px;
    bottom: 0px;
    width: 2px;
    transform: scaleY(0);
}

.top {
    top: 0px;
    transform: scaleX(0);
    transform-origin: left center;
    transition-delay: .2s;
}

.left {
    left: 0px;
    transform-origin: bottom center;
    transition-delay: .3s;
}

.bottom {
    bottom: 0px;
}

.right {
    right: 0px;
    transform-origin: top center;
    transition-delay: .1s;
}

input:focus~.right {
    transform: scaleY(1);
    transform-origin: bottom center;
}

input:focus~.left {
    transform: scaleY(1);
    transform-origin: top center;
}

input:focus~.top {
    transform: scaleY(1);
    transform-origin: right center;
}

.container1 {
    height: 30px;
    width: 250px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.btn {
    position: absolute;
    left: 50%;
    top: 64%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 5px;
    width: 52%;
    margin-top: 40px;
    background-color: #61dafb;
    color: #fff;
}
</style>